<template>
	<el-card class="tab-card">
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="页面/全局区块埋点" name="first">
				<div class="clearfix">
					<div class="left-module">
						<el-select v-model="pageId" size="mini" @change="handleChangePage">
							<el-option
								v-for="item in pageNavigate"
								:value="item.id"
								:label="item.pageName"
								:key="item.id">
							</el-option>
						</el-select>
						<pic-upload-module :picInfo="picInfo" :action="[]"></pic-upload-module>
					</div>
					<div class="right-module">
						<div class="content" v-if="pageTableData.length === 0">
							暂无埋点
						</div>
						<div class="content" v-else>
							<el-card
								v-for="item in pageTableData"
								class="bury-card"
								:key="item.trackId">
								<div slot="header" class="content">
									<span>{{item.trackName}}</span>
									<confirm-btn
										:status="item.processStatus" :id="item.id"
										v-if="confirmBtnType === 'edit'">
									</confirm-btn>
								</div>
								<div>
									<div class="item clearfix">
										<div class="left">埋点提示：</div>
										<div class="right">
											请根据下面的说明，在代码中
											<span :class="'requirement-type-' + item.requirementType">
												{{$handleRequirementType(item.requirementType) || "--"}}
											</span>
											埋点
										</div>
									</div>
									<div class="item clearfix">
										<div class="left">埋点时机：</div>
										<div class="right">{{item.extMessage ? item.extMessage.trackOpportunity : "--"}}</div>
									</div>
									<div class="item clearfix">
										<div class="left">代码示例：</div>
										<div class="right">
											<pre>{{item.demoCode}}</pre>
										</div>
									</div>
								</div>
							</el-card>
							<el-pagination
								class="tab-pagination"
								@size-change="handleSizePage"
								@current-change="handleCurrentPage"
								:current-page="pageSearch.currentPage"
								:page-sizes="[5, 10, 20, 30, 40]"
								:page-size="pageSearch.pageSize"
								background
								layout="total, prev, pager, next, sizes, jumper"
								:total="pageSearch.total">
							</el-pagination>
						</div>
					</div>
				</div>
			</el-tab-pane>
			<el-tab-pane label="无位置埋点" name="second">
				<div v-if="noPageTableData.length === 0">
					暂无埋点
				</div>
				<div v-else>
					<el-card
						v-for="item in noPageTableData"
						class="bury-card"
						:key="item.trackId">
						<div slot="header" class="content">
							<span>{{item.trackName}}</span>
							<confirm-btn :status="item.processStatus" :id="item.id" v-if="confirmBtnType === 'edit'">
							</confirm-btn>
						</div>
						<div>
							<div class="item clearfix">
								<div class="left">埋点提示：</div>
								<div class="right">
									请根据下面的说明，在代码中
									<span :class="'requirement-type-' + item.requirementType">
										{{$handleRequirementType(item.requirementType) || "--"}}
									</span>
									埋点
								</div>
							</div>
							<div class="item clearfix">
								<div class="left">埋点时机：</div>
								<div class="right">{{item.extMessage ? item.extMessage.trackOpportunity : "--"}}</div>
							</div>
							<div class="item clearfix">
								<div class="left">代码示例：</div>
								<div class="right">
									<pre>{{item.demoCode}}</pre>
								</div>
							</div>
						</div>
					</el-card>
					<el-pagination
						class="tab-pagination"
						@size-change="handleSize"
						@current-change="handleCurrent"
						:current-page="noPageSearch.currentPage"
						:page-sizes="[5, 10, 20, 30, 40]"
						:page-size="noPageSearch.pageSize"
						background
						layout="total, prev, pager, next, sizes, jumper"
						:total="noPageSearch.total">
					</el-pagination>
				</div>
			</el-tab-pane>
		</el-tabs>
	</el-card>
</template>

<script>
	export default {
		name: "developEdit",
		data() {
			return {
				id: null,
				activeName: "first",
				activeCount: 0,
				pageId: null,
				pageNavigate: [],
				pageRow: {},
				picInfo: {
					url: "",
					iconPosition: []
				},
				pageSearch: {
					currentPage: 1,
					pageSize: 5,
					total: 0
				},
				pageTableData: [],
				noPageSearch: {
					currentPage: 1,
					pageSize: 5,
					total: 0
				},
				noPageTableData: [],
				confirmBtnType: ""
			}
		},
		components: {
			// ConfirmBtn
		},
		mounted() {
			let {id, type} = this.$route.params;
			this.id = unescape(id);
			this.confirmBtnType = type;
			this.handleQueryPageNavigate();
		},
		methods: {
			// 获取导航
			async handleQueryPageNavigate() {
				let res = await this.$pageApi.pageNavigate({
					requirementId: this.id
				});
				if (res) {
					let {pageNavigateList} = res.value;
					this.pageNavigate = pageNavigateList;
					if (pageNavigateList.length > 0) {
						let id = pageNavigateList[0].id;
						this.pageId = id;
						this.handleChangePage(id);
					}
				}
			},
			handleChangePage(val) {
				this.handleQueryPage(val);
			},
			async handleQueryPage(id) {
				let res = await this.$pageApi.pageQuery({id});
				if (res) {
					this.pageRow = res.value;
					this.picInfo = {
						url: res.value.imageUrl,
						iconPosition: res.value.iconPosition
					};
					this.handleEventList();
				}
			},
			// 页面埋点
			handleCurrentPage(page) {
				this.pageSearch.currentPage = page;
				this.handleEventList();
			},
			handleSizePage(size) {
				this.pageSearch.currentPage = 1;
				this.pageSearch.pageSize = size;
				this.handleEventList();
			},
			// 无位置埋点
			handleCurrent(page) {
				this.noPageSearch.currentPage = page;
				this.handleEventList();
			},
			handleSize(size) {
				this.noPageSearch.currentPage = 1;
				this.noPageSearch.pageSize = size;
				this.handleEventList();
			},
			// 埋点列表
			async handleEventList() {
				let data = {};
				if (this.activeName === "first") {
					let {currentPage, pageSize} = this.pageSearch;
					data = {
						currentPage,
						pageSize,
						requirementId: this.id,
						pageId: this.pageRow.pageId,
						sdkType: this.pageRow.sdkType,
						showDev: true
					}
				} else if (this.activeName === "second") {
					let {currentPage, pageSize} = this.noPageSearch;
					data = {
						currentPage,
						pageSize,
						hasPosition: true,
						requirementId: this.id,
						showDev: true
					}
				}
				let res = await this.$eventApi.eventList(data);
				if (res) {
					let {list, total} = res.value;
					if (this.activeName === "first") {
						this.pageTableData = list;
						this.pageSearch.total = total;
					} else {
						this.noPageTableData = list;
						this.noPageSearch.total = total;
					}
				}
			},
			// 切换tab
			handleClick(tab) {
				;
				let {name} = tab;
				this.activeName = name;
				if (name === "second") {
					if (this.activeCount === 0) {
						this.handleEventList();
					}
					this.activeCount++;
				}
			},
		}
	}
</script>

<style lang="scss">
	.tab-card {
		.el-tab-pane {
			box-sizing: border-box;

			.left-module {
				width: 25%;
				float: left;
				/*height: 300px;*/
				.el-select {
					width: 100%;
					margin-bottom: 15px;
				}

				.pic-upload-module {
					height: 300px;
				}
			}

			.right-module {
				padding-left: 25%;

				& > .content {
					padding-left: 20px;
				}
			}
		}

		.bury-card {
			&:not(:first-child) {
				margin-top: 5px;
			}

			.el-card__header {
				background-color: #f8f8f9;
			}

			.item {
				padding: 8px 0;

				& > .left {
					width: 80px;
					float: left;
					padding-left: 20px;
				}

				.tip {
					position: relative;

					& > i {
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						color: #fd4f54;
					}

				}
			}
		}

		.tab-pagination.el-pagination {
			margin: 20px 0;
		}
	}

</style>
